<template>
  <div class="my-container">
    <div class="stu-container">
      <div class="stu-card" style="height:100px;background-color:#66ccff">
        aa
      </div>
      <div style="height:100px;background-color:#66ccff">
        aa
      </div>
      <div style="height:100px;background-color:#66ccff">
        aa
      </div>
    </div>

    <div class="my-card">
      <div style="height:100px;background-color:#66ccff" />
    </div>
    <div class="my-card">
      <div style="height:100px" />
    </div>
    <div class="my-card">
      <div style="height:100px" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
    }
  },

  methods: {

  }
}
</script>

<style scoped>
.stu-container {
  text-align: center;
}
.stu-card{
  margin:0 auto 10px auto;
  max-width: 1080px;
}

.my-container {
  padding: 10px;
  background-color: #e6e6e6;
  min-height: calc(100vh - 84px);
}
.my-card {
  padding: 24px;
  margin-bottom: 10px;
  background-color: #fff;
}
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
</style>
